<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=building-width, initial-scale=1, maximum-scale=1">
    <% include("/templates/common/header.html"){} %>
    <!-- jqgrid-->
    <link href="${ctxPath!}/css/bootstrap.css?v=3.3.6" rel="stylesheet">
    <link href="${ctxPath!}/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="${ctxPath!}/jqgrid/jqgrid.css" rel="stylesheet">
    <style>
        .ui-jqgrid-btable tbody tr td{
            vertical-align: middle!important;
        }
    </style>
</head>
<body>
<div class="content-search">
    <div style="padding:15px;">
        <atom:auth type="button" perm="sys:perm:edit" iconText="&#xe654;" onclick="return add();" text="添加顶级菜单/权限"/>
    </div>
</div>
<!-- 内容主体区域 -->
<div style="padding: 2px;">
    <div class="jqGrid_wrapper">
        <table id="table"></table>
        <div id="pager" ></div>
    </div>
</div>
</div>
<script src="${ctxPath!}/jquery/jquery.min.js?v=2.2.4"></script>
<script src="${ctxPath!}/jquery/jquery.form.js?v=3.50.0"></script>
<script src="${ctxPath!}/jqgrid/i18n/grid.locale-cnffe4.js?0820"></script>
<script src="${ctxPath!}/jqgrid/jquery.jqGrid.minffe4.js?0820"></script>
<script src="${ctxPath!}/jqgrid/frozen.js?v=1.0.1"></script>
<script src="${ctxPath!}/jqgrid/myjqGrid.js"></script>
<script src="${ctxPath!}/layui/layui.js"></script>
<script>

    layui.use('form', function(){
    });

    var colNames = ["ID", "pid","资源地址", "名称", "权限编码", "是否显示", "备注", "操作"];
    var colModel = [{
        name : "id",
        index : "id",
        width : 50,
        hidden: true,
        align : "left"
    },{
        name : "pid",
        index : "pid",
        width : 50,
        hidden: true,
        align : "left"
    },{
        name : "url",
        index : "url",
        sortable : false,
        editable : false,
        width : 120,
        align : "left"
    },{
        name : "name",
        index : "name",
        editable : false,
        width : 120,
        align : "left"
    },{
        name : "perm",
        index : "perm",
        editable : false,
        width : 120,
        align : "left"
    },{
        name : "display",
        index : "display",
        editable : false,
        width : 50,
        align : "left",
        formatter : function(cellvalue, options, rowdata){
            if(rowdata.display){
                return "是";
            }else {
                return "否";
            }
        }
    },{
        name : "remark",
        index : "remark",
        editable : false,
        width : 120,
        align : "left"
    },{
        name : "action",
        index : "action",
        width : 280,
        title:false,
        editable:true,
        align : "center",
        formatter : function(cellvalue, options, rowdata){
            var html = '';
            if(rowdata.display){
                html = '<atom:auth type="button" perm="sys:perm:edit" extClass="btn-add" iconText="&#xe642;" dataId="' + rowdata.id + '" text="添加下级权限" />';
            }
            html += '<atom:auth type="button" perm="sys:perm:edit" extClass="btn-edit  layui-bg-blue" iconText="&#xe642;" dataId="' + rowdata.id + '" text="编辑" />'+
                    '<atom:auth type="button" perm="sys:perm:delete" extClass="btn-del layui-bg-red" iconText="&#xe640;" dataId="' + rowdata.id + '" text="删除" />';
            return html;
        }
    }];


    var myJqGrid = null;
    $(document).ready(function () {
        myJqGrid = new MyJqGrid({
            jqGrid_id: 'table',
            data: "${ctxPath!}/sys/perm/list.json",
            isSubGrid: true,
            autowidth: true,
            shrinkToFit: true,
            autoScroll: true,
            colNames: colNames,
            colModel: colModel,
            subGridRowExpanded:subGridRowExpanded
        })
    });
    function search(){
        myJqGrid.reloadGrid({});
        return false;
    }

    function subGridRowExpanded(subgrid_id, row_id){
        var rowdata =  $("#table").jqGrid("getRowData",row_id);
        var isSubGrid = true;
        console.log(rowdata);
        if(!rowdata.display){
            isSubGrid = false;
        }
        var subgrid_table_id = subgrid_id + "_t";
        $("#" + subgrid_id).html( "<table id='" + subgrid_table_id + "' class='scroll'></table>");
        $("#" + subgrid_table_id).jqGrid( {
            url : "${ctxPath!}/sys/perm/list.json?pid=" + row_id,
            datatype : "json",
            colNames : colNames,
            colModel : colModel,
            rowNum : 20,
            autowidth : true,
            shrinkToFit:true,
            height : '100%',
            width: '100%',
            prmNames: {     // 自定义Ajax请求参数
                page:"pageNumber", rows:"pageSize", sort: "orderColunm",
                order: "orderMode", search:"_search", nd:"nd", id:"id",
                oper:"oper",editoper:"edit",addoper:"add",deloper:"del",
                subgridid:"id", npage: null, totalrows:"total"
            },
            jsonReader: {   // 自定义表格的JSON读取参数
                root: "list", page: "page",
                total: "total", records: "records"
            },
            subGrid : isSubGrid,
            subGridRowExpanded : subGridRowExpanded,
            subGridRowColapsed : function(subgrid_id, row_id) {
                var subgrid_table_id;
                subgrid_table_id = subgrid_id+"_t";
                $("#"+subgrid_table_id).remove();
            }

        });
    }

    function add() {
        layer.open({
            title: '添加用户',
            type: 2,
            area: ['500px', '420px'],
            content: '${ctxPath!}/sys/perm/add'
        });
        return false;
    }

    $(function(){

        $(document).on("click", ".btn-add", function (e) {
            console.log($(this).data);
            layer.open({
                title: '添加下级权限',
                type: 2,
                area: ['500px', '420px'],
                content: '${ctxPath!}/sys/perm/add?id='+$(this).data("id")
            });
        });

        $(document).on("click", ".btn-edit", function (e) {
            layer.open({
                title: '编辑菜单／权限',
                type: 2,
                area: ['500px', '420px'],
                content: '${ctxPath!}/sys/perm/edit?id='+$(this).data("id")
            });
        });

        $(document).on("click", ".btn-del", function (e) {
            var id = $(this).data("id");
            layer.confirm('确定删除该菜单／权限吗？', {
                icon: 3,
                btn: ['确定','取消'] //按钮
            }, function(){ //确定
                var params = {"id":id};
                console.log(id);
                $.post("${ctxPath!}/sys/perm/delete", params, function(data){
                    if(data.status == 200){
                        layer.alert(data.msg, {
                            icon: 1,
                            skin: 'layer-ext-moon'
                        },function () {
                            search();
                            layer.closeAll();
                        });
                    }else{
                        layer.alert(data.msg, {
                            icon: 2,
                            skin: 'layer-ext-moon'
                        });
                    }
                });
            }, function(){ //取消
            });
        });
    });

</script>
</body>
</html>